<template>
	<view class="container">

		<view>
			<uni-row>
				<uni-col :span="12">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="queryParams.beginCreateTime" type="date" placeholder="选择开始时间"
							@change="search"></uni-datetime-picker>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="queryParams.endCreateTime" type="date" placeholder="选择结束时间"
							@change="search"></uni-datetime-picker>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 可用余额展示 -->
		<view class="balance-container">
			<view class="quota-row">
				<view class="quota-item left">
					<view class="quota-label">总额度</view>
					<view class="quota-value">¥ {{ReleaseCreditLimit.creditLimit}}</view>
				</view>
				<view class="quota-item right">
					<view class="quota-label">已用额度</view>
					<view class="quota-value used">¥ {{ReleaseCreditLimit.creditLimit-ReleaseCreditLimit.remainingCredit}}</view>
				</view>
			</view>
			<view class="balance-title">可用余额</view>
			<view class="balance-amount">¥ {{ReleaseCreditLimit.remainingCredit}}</view>
		</view>

		<!-- 余额变动明细 -->
		<view class="detail-container">
			<view class="detail-header">
				<text>余额变动明细</text>
			</view>

			<view class="detail-list">
				<view class="detail-item" v-for="(item, index) in ReleaseCreditLimit.vehicleReleaseCreditRecordList" :key="index"
					@tap="goToVehicleReleaseCreditDetail(item.id)">
					<view class="customer-name">
						{{item.nameAg}}
					</view>
					<view class="detail-content">
						<view class="detail-left">
							<view class="detail-order">调拨单号: {{item.sapOrderNo}}</view>
							<view class="detail-time">{{item.createTime}}</view>
						</view>
						<view class="detail-right">
							<view class="detail-amount">
								{{ '-' }}¥ {{item.currentDeduceCredit}}
							</view>
							<view class="detail-balance">余额: ¥ {{item.remainingCredit}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryReleaseCreditRecordByUser
	} from '@/api/tms/ecDeliverVehicle'

	export default {
		created() {
			this.initDateRange();
			this.search();
			this.loadBalanceData();
		},
		data() {
			return {
				ReleaseCreditLimit: {
					id: null,
					userName: null,
					nickName: null,
					creditLimit: null,
					remainingCredit: null,
					isMonthlyReset: '1',
					createById: null,
					createByName: null,
					createTime: null,
					updateById: null,
					updateByName: null,
					updateTime: null,
					isDeleted: null,
					vehicleReleaseCreditRecordList: []
				},
				queryParams: {
					beginCreateTime: "",
					endCreateTime: ""
				},
			};
		},
		methods: {
			created() {
				this.initDateRange();
				this.search();
			},
			initDateRange() {
				const today = new Date(); // 获取当前日期
				const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); // 当月第一天
				const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 当月最后一天
				this.queryParams.beginCreateTime = this.formatDate(firstDay);
				this.queryParams.endCreateTime = this.formatDate(lastDay);
			},
			formatDate(date) {
				// 格式化日期为'yyyy-MM-dd'
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			search() {
				this.queryParams.params = {};
				if (this.queryParams.beginCreateTime) {
					this.queryParams.params["beginCreateTime"] = this.queryParams.beginCreateTime + " 00:00:00";
				}
				if (this.queryParams.endCreateTime) {
					this.queryParams.params["endCreateTime"] = this.queryParams.endCreateTime + " 23:59:59";
				}
				this.loadBalanceData();
			},
			// 加载余额数据
			loadBalanceData() {
				queryReleaseCreditRecordByUser(this.queryParams)
					.then(response => {
						this.ReleaseCreditLimit = response.data;
						this.ReleaseCreditLimi.vehicleReleaseCreditRecordList = response.data
							.vehicleReleaseCreditRecordList;
					})
			},
			goToVehicleReleaseCreditDetail(id) {
				uni.navigateTo({
					url: '/pages/ec/vehicleReleaseCreditDetail/index?id=' + id,
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 10px;
	}

	.search-param {
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		overflow: hidden;
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		padding: 5px;
		background-color: #fff;
		margin: 0 5px;
		border-radius: 8px;
	}

	/* 余额展示样式 */
	/* 修改后的余额展示样式 */
	.balance-container {
		background-color: #fff;
		padding: 12px 15px;
		margin: 10px 0;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		text-align: center;
		min-height: auto;

		.quota-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 6px;

			.quota-item {
				display: flex;
				flex-direction: column;

				&.left {
					text-align: left;
				}

				&.right {
					text-align: right;
				}

				.quota-label {
					font-size: 12px;
					color: #666;
					margin-bottom: 2px;
				}

				.quota-value {
					font-size: 14px;
					font-weight: bold;
					color: #333;

					&.used {
						color: #f56c6c;
					}
				}
			}
		}

		.balance-title {
			font-size: 16px;
			color: #666;
			margin: 6px 0 4px 0;
		}

		.balance-amount {
			font-size: 28px;
			font-weight: bold;
			color: #67c23a;
			margin-top: 0;
		}
	}

	/* 明细列表样式 */
	.detail-container {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-top: 10px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

		.detail-header {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
			margin-bottom: 10px;
		}

		.detail-list {
			.detail-item {
				display: flex;
				flex-direction: column;
				/* 改为垂直布局 */
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;

				.customer-name {
					text-align: left;
					/* 居中显示 */
					font-size: 15px;
					color: #67c23a;
					/* 绿色字体 */
					font-weight: bold;
					margin-bottom: 8px;
					/* 与下方内容间距 */
				}

				.detail-content {
					display: flex;
					justify-content: space-between;
				}

				&:last-child {
					border-bottom: none;
				}

				.detail-left {
					flex: 1;

					.detail-order {
						font-size: 14px;
						color: #333;
						margin-bottom: 5px;
					}

					.detail-time {
						font-size: 12px;
						color: #999;
					}
				}

				.detail-right {
					text-align: right;

					.detail-amount {
						font-size: 16px;
						font-weight: bold;
						margin-bottom: 5px;

						&.deduction {
							color: #f56c6c;
						}

						&.add {
							color: #67c23a;
						}
					}

					.detail-balance {
						font-size: 12px;
						color: #999;
					}
				}
			}
		}
	}
</style>